<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>供应商列表</title>
		<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
		<script src="js/vue.js"></script>
		<script src="element-ui/lib/index.js"></script>
		<script src="js/axios-0.18.0.js"></script>
		<script src="js/server.js"></script>
	</head>
	<body>
		<div id="div">
			<!--
			账单列表：
				查询条件的供应商从数据表中查询
				已支付的账单无法删除
				已支付的账单无法修改只能查看
			-->
			
			<!-- 查询 -->
			<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
				<el-form-item label="账单编码">
					<el-input v-model="searchFrom.billCode"></el-input>
				</el-form-item>
				<el-form-item label="商品名称">
					<el-input v-model="searchFrom.productName"></el-input>
				</el-form-item>
				<el-form-item label="供应商" prop="providerId">
				    <el-select v-model="searchFrom.providerId" placeholder="请选择" >
						<el-option
								v-for="item in providerList"
								:key="item.id"
								:label="item.proName"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="doSearch">查询</el-button>
				</el-form-item>
			</el-form>

			<!-- 表格列表 -->
			<template>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="index" label="序号" width="50"></el-table-column>
					<el-table-column prop="billCode" label="账单编码" width="120">
					</el-table-column>
					<el-table-column prop="productName" label="商品名称" width="180">
					</el-table-column>
					<el-table-column prop="proName" label="供应商名称" width="180">
					</el-table-column>
					<el-table-column prop="totalPrice" label="商品总额">
					</el-table-column>
					<el-table-column prop="isPayment" label="是否支付" :formatter="isPaymentParse">
					</el-table-column>
					<el-table-column prop="creationDate" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" width="220">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleShow(scope.$index, scope.row)">查看</el-button>
							<el-button size="mini" v-if="scope.row.isPayment==1" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" type="danger"  v-if="scope.row.isPayment==1"
								@click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>

			<!-- 分页条 -->
			<div class="block">
				<el-pagination 
					@size-change="handleSizeChange" 
					@current-change="handleCurrentChange"
					:current-page="pagination.currentPage" 
					:page-sizes="[3, 5, 10]"
					:page-size="pagination.pageSize"
					layout="total, sizes, prev, pager, next, jumper" 
					:total="pagination.total">
				</el-pagination>
			</div>


			<!-- 查看 -->
			<el-dialog title="查看账单信息" :visible.sync="showFormVisible">
			  <el-form :model="showForm">
					<el-form-item label="账单编码" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" disabled v-model="showForm.billCode"></el-input>
					</el-form-item>
					<el-form-item label="商品名称" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" disabled v-model="showForm.productName"></el-input>
					</el-form-item>
					<el-form-item label="商品描述" :label-width="formLabelWidth">
					  <el-input type="textarea" autocomplete="off" disabled v-model="showForm.productDesc"></el-input>
					</el-form-item>
					<el-form-item label="商品数量" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" disabled v-model="showForm.productCount"></el-input>
					</el-form-item>
					<el-form-item label="商品单位" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" disabled v-model="showForm.productUnit"></el-input>
					</el-form-item>
					<el-form-item label="商品总额" :label-width="formLabelWidth">
					  <el-input autocomplete="off" disabled v-model="showForm.totalPrice"></el-input>
					</el-form-item>
					<el-form-item label="是否支付" :label-width="formLabelWidth">
					  <el-input v-model="showForm.isPayment" autocomplete="off" disabled></el-input>
					</el-form-item>
					<el-form-item label="创建时间" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" disabled v-model="showForm.creationDate"></el-input>
					</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="showFormVisible = false">取 消</el-button>
			  </div>
			</el-dialog>
			
			<!-- 编辑 -->
			<el-dialog title="编辑账单信息" :visible.sync="editFormVisible">
			  <el-form :model="editForm" :rules="rules" ref="editForm" >  <!-- 提交时如果进行表单校验需要指定ref属性 -->
					<el-form-item label="账单编码" prop="billCode" :label-width="formLabelWidth">
					    <el-input v-model="editForm.billCode" disabled ></el-input>
					</el-form-item>
					<el-form-item label="商品名称" prop="productName" :label-width="formLabelWidth">
					    <el-input v-model="editForm.productName"></el-input>
					</el-form-item>
					<el-form-item label="商品描述" prop="productDesc" :label-width="formLabelWidth">
						<el-input type="textarea" v-model="editForm.productDesc"></el-input>
					</el-form-item>
					<el-form-item label="商品数量" prop="productCount" :label-width="formLabelWidth">
					    <el-input v-model="editForm.productCount"></el-input>
					</el-form-item>
					<el-form-item label="商品单位" prop="productUnit" :label-width="formLabelWidth">
					    <el-select v-model="editForm.productUnit" placeholder="请选择" >
							<el-option
									v-for="item in productUnitList"
									:key="item"
									:label="item"
									:value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品总额" prop="totalPrice" :label-width="formLabelWidth">
					    <el-input v-model="editForm.totalPrice"></el-input>
					</el-form-item>
					<el-form-item label="是否支付" prop="isPayment" :label-width="formLabelWidth">
					    <el-radio v-model="editForm.isPayment" v-bind:label="1" >未支付</el-radio>
					    <el-radio v-model="editForm.isPayment" v-bind:label="2" >已支付</el-radio>
					</el-form-item>
					<el-form-item label="供应商" prop="providerId" :label-width="formLabelWidth">
					    <el-select v-model="editForm.providerId" placeholder="请选择" >
							<el-option
									v-for="item in providerList"
									:key="item.id"
									:label="item.proName"
									:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
					<el-button @click="editFormVisible = false">取 消</el-button>
			        <el-button type="primary" @click="doUpdate('editForm')">确 定</el-button>
			  </div>
			</el-dialog>
			
		</div>
	</body>
	<script type="application/javascript">
		new Vue({
			el: '#div',
			data: {
				//查询
				searchFrom: {
					//查询条件中需要定义变量名,因为页面刚加载时发送请求根据searchForm.变量名获取查询条件值,如果没有变量名则得到是undefined,也就是变量未定义
					billCode:"",
					productName:"",
					providerId:""
				},
				productUnitList:['瓶','块','斤','袋','个'],
				providerList:[  //供应商从数据库表中查询,此处数据为测试数据
				],
				//列表数据
				tableData: [
				],
				
				//分页
				pagination: {
					currentPage: 1,
					pageSize: 3,
					total: 0
				},
				
				//查看
				showFormVisible: false,
				showForm: {
					billCode:"",
					productName:"",
					productDesc:"",
					productCount:"",
					productUnit:"",
					totalPrice:"",
					isPayment:"",
					creationDate:""
				},
				formLabelWidth: '120px', //设置对话框输入框的宽度
				
				//编辑
				editFormVisible: false,
				editForm:{
					productUnit:'瓶',
					isPayment: '1',
					providerId: 1
				},
				rules: {
				    billCode: [{
				    	required: true,
				    	message: '请输入账单编码',
				    	trigger: 'blur'
				    }],
				    productName: [{
				    	required: true,
				    	message: '请输入商品名称',
				    	trigger: 'blur'
				    }]
				}
			},
			methods: {
				doSearch() {
					//查询条件时重置当前页码为第一页
					this.pagination.currentPage = 1;
					this.doList();
				},
				handleShow(index, row) {
					this.showFormVisible = true;
					console.log(index, row);

					this.showForm.billCode = row.billCode;
					this.showForm.productName = row.productName;
					this.showForm.productDesc = row.productDesc;
					this.showForm.productCount = row.productCount;
					this.showForm.productUnit = row.productUnit;
					this.showForm.totalPrice = row.totalPrice;
					//需要额外处理的数据
					this.showForm.isPayment = row.isPayment == 1 ? "未支付":"已支付"
					this.showForm.creationDate = row.creationDate;
				},
				handleEdit(index, row) {
					this.editFormVisible = true;
					console.log(index, row);
					this.editForm = row;
				},
				handleDelete(index, row) {
					this.$confirm(
								'此操作将永久删除该数据, 是否继续?','提示', 
								{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
					}).then(resp => {
						axios.get(
								server_url + "/servlet/bill?method=doDel&id=" + row.id
						).then(resp=>{
							if(resp.data.code == "00"){
								//给出成功提示
								this.$message.success(resp.data.msg);
								//重置当前页码为第一页
								this.pagination.currentPage = 1;
								//重新发送请求刷新列表数据
								this.doList();
							}else{
								this.$message.error(resp.data.msg);
							}
						}).catch(err=>{
							console.log(err);
						})

					})
					console.log(index, row);
				},
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
					this.pagination.pageSize = val;
					this.doList();
				},
				handleCurrentChange(val) {
					console.log(`当前页: ${val}`);
					this.pagination.currentPage = val;
					this.doList();
				},
				//处理使用代号表示的值
				isPaymentParse(row, column, cellValue) {
					let str = '';
					switch (cellValue) {
						case 1:
							str = "未支付";
							break;
						case 2:
							str = "已支付";
							break;
					}
					return str;
				},
				doAllProviders(){
					axios.get(
							server_url + "/servlet/bill?method=doAllProviders"
					).then(resp=>{
						if(resp.data.code == "00"){
							this.providerList = resp.data.data;
						}
					}).catch(err=>{
						console.log(err);
					})
				},
				doList(){
					axios.post(
							server_url + "/servlet/bill?method=doList",
							"&currentPage=" + this.pagination.currentPage +
							"&pageSize=" + this.pagination.pageSize +
							"&billCode=" + this.searchFrom.billCode +
							"&productName=" + this.searchFrom.productName +
							"&providerId=" + this.searchFrom.providerId
					).then(resp=>{
						if(resp.data.code == "00"){
							//将响应成功后的分页数据中的总记录数和列表集合进行赋值
							this.tableData = resp.data.data.list;
							this.pagination.total = resp.data.data.totalCount;
						}
					}).catch(err=>{
						console.log(err);
					})
				},
				doUpdate(formName) {
					this.$refs[formName].validate((valid) => {
						console.log(valid);
						if (valid) {
							axios.post(
									server_url + "/servlet/bill?method=doUpdate",
									"&id=" + this.editForm.id +
									"&productName=" + this.editForm.productName +
									"&productDesc=" + this.editForm.productDesc +
									"&productCount=" + this.editForm.productCount +
									"&productUnit=" + this.editForm.productUnit +
									"&totalPrice=" + this.editForm.totalPrice +
									"&isPayment=" + this.editForm.isPayment +
									"&providerId=" + this.editForm.providerId
							).then(resp=>{
								if(resp.data.code == "00"){
									//隐藏对话框
									this.editFormVisible = false;
									//给出成功提示
									this.$message.success(resp.data.msg);
									//重新请求刷新列表数据
									this.doList();
								}else{
									this.$message.error(resp.data.msg);
								}
							}).catch(err=>{
								console.log(err)
							})

						}
					});
				}

			},
			mounted: function() {
				//页面加载时就要获取供应商下拉框的数据进行展示
				this.doAllProviders();
				//获取列表数据
				this.doList();
			}
		});
	</script>
</html>